<template>
  <!-- :title="
      type == 'edit' ? '编辑账户' : type == 'add' ? '新增账户' : '重置密码'
    " -->
  <el-dialog
    :title="
      type == 'edit'
        ? $t('common.common20') + $t('user.user5')
        : type == 'add'
        ? $t('common.common18') + $t('user.user5')
        : $t('vip.vip7')
    "
    :visible.sync="dialogVisible"
    width="500px"
    :before-close="handleClose"
    :close-on-click-modal="false"
  >
    <el-form
      :model="ruleForm"
      :rules="rules"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <div v-if="['add', 'edit'].includes(type)">
        <!-- 账号名 -->
        <el-form-item :label="$t('user.user1')" prop="username">
          <el-input
            v-model.trim="ruleForm.username"
            :placeholder="$t('user.user1')"
            clearable
            :disabled="id ? true : false"
            maxlength="10"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- 姓名 -->
        <el-form-item :label="$t('vip.vip14')" prop="name">
          <el-input
            v-model.trim="ruleForm.name"
            :placeholder="$t('vip.vip14')"
            clearable
            maxlength="5"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- 手机号 -->
        <el-form-item :label="$t('user.user2')" prop="mobile">
          <el-input
            v-model.number="ruleForm.mobile"
            :placeholder="$t('user.user2')"
            clearable
            maxlength="11"
            show-word-limit
          ></el-input>
        </el-form-item>
        <!-- 部门 -->
        <el-form-item :label="$t('user.user3')" prop="parent_id_list">
          <!-- :show-all-levels="false"  -->
          <el-cascader
            style="width: 100%"
            :options="getdeptList"
            v-model="ruleForm.parent_id_list"
            :props="{
              value: 'id',
              label: 'department_name',
              checkStrictly: true,
            }"
            :placeholder="$t('user.user3')"
          >
          </el-cascader>
        </el-form-item>
        <!-- 角色 -->
        <el-form-item :label="$t('user.user4')" prop="roles">
          <el-select
            style="width: 100%"
            v-model="ruleForm.roles"
            :placeholder="$t('user.user4')"
            multiple
            collapse-tags
          >
            <el-option
              v-for="item in getRolesList"
              :key="item.id"
              :label="item.role_name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <!-- <el-form-item label="上级" prop="parent_id">
          <el-select
            v-model="ruleForm.parent_id"
            placeholder="请选择上级"
            style="width: 100%"
          >
            <el-option
              v-for="item in getlevel"
              :key="item.id"
              :label="item.html + item.name+' ( '+item.username+' ) '"
              :value="item.id"
              :disabled="(item.status==2||item.id==ruleForm.id)?true:false"
            >
            </el-option>
          </el-select>
        </el-form-item> -->
      </div>
      <div v-if="['add', 'pwd'].includes(type)">
        <!-- 密码 -->
        <el-form-item :label="$t('login.login2')" prop="password">
          <!-- <el-input
            
            :placeholder="$t('login.login2')"
            show-password
            clearable
          ></el-input> -->
          <pass-word v-model.trim="ruleForm.password" :placeholder="$t('login.login2')"></pass-word>
        </el-form-item>
        <!-- 重复密码 -->
        <el-form-item :label="$t('user.user6')" prop="password_confirm">
          <pass-word v-model.trim="ruleForm.password_confirm" :placeholder="$t('user.user7')"></pass-word>
          <!-- <el-input
            v-model.trim="ruleForm.password_confirm"
            :placeholder="$t('user.user7')"
            show-password
            clearable
          ></el-input> -->
        </el-form-item>
      </div>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
      v-if="
        (checkPermission(['users@update']) && id) ||
        (checkPermission(['users@save']) && !id)
      "
    >
      <el-button @click="resetForm('ruleForm')">{{
        $t("common.common1")
      }}</el-button>
      <el-button
        type="primary"
        @click="submitForm('ruleForm')"
        :loading="submitLoading"
        >{{ $t("common.common2") }}</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { edit, add, editUser, restPassword } from "@/api/system/user";
export default {
  props: {
    getRolesList: {
      type: Array,
      default: [],
    },
    getdeptList: {
      type: Array,
      default: [],
    },
    // getlevel: {
    //   type: Array,
    //   default: [],
    // },
  },
  data() {
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        // 请再次输入密码
        callback(new Error(this.$t("user.user8")));
      } else if (value !== this.ruleForm.password) {
        // 两次输入密码不一致
        callback(new Error(this.$t("user.user9")));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      type: "",
      id: "",
      submitLoading: false,
      ruleForm: {
        username: "",
        name: "",
        mobile: null,
        parent_id_list: [],
        roles: [],
        // parent_id: "",
        password: "",
        password_confirm: "",
        id: "",
      },
      rules: {
        username: [
          // 请输入账号名
          {
            required: true,
            message: this.$t("common.common26") + this.$t("user.user1"),
            trigger: "blur",
          },
          // 长度最大10个字符
          { max: 10, message: this.$t("user.user10"), trigger: "blur" },
          // 仅支持输入英文及数字
          {
            pattern: /^[A-Za-z0-9]+$/,
            message: this.$t("user.user11"),
            trigger: "blur",
          },
        ],
        name: [
          // 请输入姓名
          {
            required: true,
            message: this.$t("common.common26") + this.$t("vip.vip14"),
            trigger: "blur",
          },
          // 长度最大5个字符
          { max: 5, message: this.$t("user.user14"), trigger: "blur" },
          // 仅支持输入中文
          {
            pattern: /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/,
            message: this.$t("user.user12"),
            trigger: "blur",
          },
        ],
        mobile: [
          // 请输入手机号
          {
            required: true,
            message: this.$t("common.common26") + this.$t("user.user2"),
            trigger: "blur",
          },
          // 请输入11位的手机号
          {
            pattern: /^1[3-9]\d{9}$/,
            message: this.$t("user.user13"),
            trigger: "blur",
          },
        ],
        parent_id_list: [
          // 请选择部门
          {
            required: true,
            message: this.$t("common.common27") + this.$t("user.user3"),
            trigger: "change",
          },
        ],
        // 请选择角色
        roles: [
          {
            required: true,
            message: this.$t("common.common27") + this.$t("user.user4"),
            trigger: "change",
          },
        ],
        // parent_id: [
        //   { required: true, message: "请选择上级", trigger: "change" },
        // ],
        // 请输入密码
        password: [
          {
            required: true,
            message: this.$t("common.common16") ,
            trigger: "blur",
          },
          {
            pattern: /^(?!(?:[0-9]+|[a-zA-Z]+|[!-\/:-@\[-`{-~]+)$)[!-~]{8,16}$/,
            message: this.$t("common.common17"),
            // 请输入8~16位字母和数字和字符的密码
            trigger: "blur",
          },
        ],
        password_confirm: [
          // 请确认密码
          { required: true, message: this.$t("user.user7"), trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    init(type, id) {
      this.dialogVisible = true;
      this.type = type;
      this.id = id || "";
      if (!id) {
        return false;
      }
      this.editList(id);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.submitLoading = true;
          if (this.type == "add") {
            let obj = Object.assign({}, this.ruleForm, {
              department_id: this.ruleForm.parent_id_list.slice(-1).toString(),
            });
            this.addList(obj);
          } else if (this.type == "edit") {
            var { password, password_confirm, ...rest } = this.ruleForm;
            let obj = Object.assign({}, rest, {
              department_id: this.ruleForm.parent_id_list.slice(-1).toString(),
            });
            this.editUserList(this.id, obj);
          } else if (this.type == "pwd") {
            var { id, password, password_confirm, ...rest } = this.ruleForm;
            let obj = Object.assign({}, { id, password, password_confirm });
            this.passwordList(this.id, obj);
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleClose() {
      this.resetForm("ruleForm");
    },
    resetForm(formName) {
      this.ruleForm= {
        username: "",
        name: "",
        mobile: null,
        parent_id_list: [],
        roles: [],
        password: "",
        password_confirm: "",
        id: "",
      },
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    editList(id) {
      edit(id).then((res) => {
        var {
          id,
          username,
          name,
          mobile,
          parent_id_list,
          roles,
          // parent_id,
          ...rest
        } = res.data;
        var obj = {
          id,
          username,
          name,
          mobile,
          parent_id_list,
          roles,
          // parent_id,
        };
        this.ruleForm = obj;
      });
    },
    addList(obj) {
      add(obj).then((res) => {
        this.submitLoading = false;
        if (res.code == 10000) {
          this.resetForm("ruleForm");
          this.$parent.getList();
        }
      });
    },
    editUserList(id, obj) {
      editUser(id, obj).then((res) => {
        this.submitLoading = false;
        if (res.code == 10000) {
          this.resetForm("ruleForm");
          this.$parent.getList();
        }
      });
    },
    passwordList(id, obj) {
      restPassword(id, obj).then((res) => {
        this.submitLoading = false;
        if (res.code == 10000) {
          this.resetForm("ruleForm");
          this.$parent.getList();
        }
      });
    },
  },
};
</script>